<template>
    <div class="checkout-page">
      <AppBreadcrumb :items="breadcrumbs" />
      
      <div class="container-custom py-8">
        <h1 class="text-3xl font-bold mb-8">确认订单</h1>
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <!-- 左侧：订单信息 -->
          <div class="lg:col-span-2 space-y-6">
            <!-- 商品列表 -->
            <div class="card">
              <h2 class="text-xl font-bold mb-4">商品清单</h2>
              <div class="space-y-4">
                <div
                  v-for="item in cart.items"
                  :key="item.product.id"
                  class="flex items-center space-x-4 pb-4 border-b last:border-b-0"
                >
                  <NuxtImg
                    :src="item.product.cover"
                    :alt="item.product.title"
                    class="w-20 h-20 object-cover rounded"
                  />
                  <div class="flex-1">
                    <div class="font-medium">{{ item.product.title }}</div>
                    <div class="text-sm text-gray-500">数量：{{ item.quantity }}</div>
                  </div>
                  <div class="font-bold">
                    ¥{{ (item.product.price * item.quantity).toFixed(2) }}
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 支付方式 -->
            <div class="card">
              <h2 class="text-xl font-bold mb-4">支付方式</h2>
              <div class="grid grid-cols-2 gap-4">
                <label
                  :class="[
                    'flex items-center space-x-3 p-4 border-2 rounded-lg cursor-pointer transition-all',
                    paymentMethod === 'alipay' ? 'border-primary-600 bg-primary-50' : 'border-gray-200'
                  ]"
                >
                  <input
                    v-model="paymentMethod"
                    type="radio"
                    value="alipay"
                    class="sr-only"
                  />
                  <div class="i-mdi-alipay text-3xl text-blue-600" />
                  <span class="font-medium">支付宝</span>
                </label>
                
                <label
                  :class="[
                    'flex items-center space-x-3 p-4 border-2 rounded-lg cursor-pointer transition-all',
                    paymentMethod === 'wechat' ? 'border-primary-600 bg-primary-50' : 'border-gray-200'
                  ]"
                >
                  <input
                    v-model="paymentMethod"
                    type="radio"
                    value="wechat"
                    class="sr-only"
                  />
                  <div class="i-mdi-wechat text-3xl text-green-600" />
                  <span class="font-medium">微信支付</span>
                </label>
              </div>
            </div>
          </div>
          
          <!-- 右侧：订单摘要 -->
          <div class="lg:col-span-1">
            <div class="card sticky top-20">
              <h2 class="text-xl font-bold mb-4">订单摘要</h2>
              
              <div class="space-y-3 mb-6">
                <div class="flex justify-between">
                  <span class="text-gray-600">商品总价：</span>
                  <span>¥{{ cart.total.toFixed(2) }}</span>
                </div>
                
                <div class="border-t pt-3 flex justify-between items-baseline">
                  <span class="text-lg font-medium">应付金额：</span>
                  <span class="text-2xl font-bold text-primary-600">
                    ¥{{ cart.total.toFixed(2) }}
                  </span>
                </div>
              </div>
              
              <button
                class="btn-primary w-full py-3 text-lg"
                :disabled="loading"
                @click="handleSubmit"
              >
                {{ loading ? '提交中...' : '提交订单' }}
              </button>
              
              <div class="mt-4 text-xs text-gray-500 text-center">
                点击提交订单表示您已同意
                <NuxtLink to="/terms" class="text-primary-600">服务条款</NuxtLink>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  definePageMeta({
    middleware: 'auth',
  })
  
  const cart = useCartStore()
  const router = useRouter()
  
  const breadcrumbs = [
    { label: '购物车', path: '/cart' },
    { label: '确认订单', path: '/checkout' },
  ]
  
  const paymentMethod = ref<'alipay' | 'wechat'>('alipay')
  const loading = ref(false)
  
  // 如果购物车为空，跳转回购物车页面
  onMounted(() => {
    if (cart.count === 0) {
      router.push('/cart')
    }
  })
  
  async function handleSubmit() {
    loading.value = true
    
    try {
      // TODO: 创建订单
      const { data } = await $fetch('/api/orders/create', {
        method: 'POST',
        body: {
          items: cart.items.map(item => ({
            productId: item.product.id,
            quantity: item.quantity,
          })),
          paymentMethod: paymentMethod.value,
        },
      }) as any
      
      // 清空购物车
      cart.clearCart()
      
      // 跳转到支付页面
      router.push(`/payment/${data.orderId}`)
    } catch (error: any) {
      alert(error.message || '创建订单失败')
    } finally {
      loading.value = false
    }
  }
  
  // SEO
  useSeoMeta({
    title: '确认订单 - 代码小库',
    robots: 'noindex',
  })
  </script>